<template>
  <div class="file-vertical-item" :style="{ width : width }">
    <div slot="reference" class="item-content">
      <el-image :src="option.imageUrl || option.icon" fit="contain" />
      <div class="name over-hide" :style="contentStyle">{{ fileName || '...' }}</div>
    </div>
    <div class="control">
      <el-button
        :disabled="!option.actions.includes('review')"
        size="mini"
        icon="el-icon-view"
        type="success"
        circle
        @click="$emit('onReview',fileUrl,fileName)"
      ></el-button>
      <el-button
        v-if="option.actions.includes('download')"
        size="mini"
        icon="el-icon-download"
        type="primary"
        circle
        @click="$emit('onDownload',fileUrl,fileName)"
      ></el-button>
      <el-button
        v-if="option.actions.includes('remove') && !provideDisabled"
        size="mini"
        icon="el-icon-close"
        type="danger"
        circle
        @click="$emit('onRemove')"
      ></el-button>
    </div>
  </div>
</template>
<script>
  import fileItemMixin from '../common/file-item-mixin'

  export default {
    name: 'FileItem',
    mixins: [fileItemMixin],
    props: {
      width: {
        type: String,
        default: '100%'
      }
    },
    computed: {
      contentStyle() {
        const width = this.width === '100%' ? this.width : `${this.width - 168}px`
        return { width }
      }
    }
  }
</script>
<style scoped lang="scss">
  .file-vertical-item {
    display: flex;
    padding: 1px 10px;
    width: calc(100% - 20px);
    justify-content: space-between;

    &:nth-of-type(odd) {
      background: linear-gradient(to right, #e6f7ff, white);
    }

    &:hover {
      background: rgba(0, 100, 225, .2);
    }

    .item-content {
      display: flex;
      align-items: center;

      .el-image {
        width: 30px;
        height: 30px;
      }

      .name {
        margin-left: 8px;
        line-height: 48px;
        min-width: 140px;
      }
    }

    .control {
      display: flex;
      line-height: 48px;
      width: 100px;
      justify-content: flex-end;
      align-items: center;

      .is-circle {
        width: 30px;
        height: 30px;
      }
    }
  }
</style>
